<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap{
    width: 500px;
    margin: 50px auto 0;
    padding: 20px;
    border: 1px solid #ccc;
}
.group{
    margin-bottom: 30px;
}
.title{
    font-size: 18px;
    padding: 6px 10px;
    width: 423px;
}
.content{
    font-size: 18px;
    padding: 8px;
    width: 429px;
    height: 80px;
}
.send{
    font-size: 16px;
    padding: 2px 14px;
}
.list{
    margin-top: 20px;
}
.list li{
    position: relative;
    margin-bottom: 10px;
}
.list li h3{
    font-size: 16px;
    padding: 4px 10px;
    background-color: #ccc;
}
.list li p{
    font-size: 16px;
    padding: 4px 10px;
    background-color: #eee;
}
.list li span{
    position: absolute;
    right: 5px;
    top: 2px;
    color: red;
    cursor: pointer;
}
</style>
</head>
<body>
    
<div class="wrap">
    <div class="group">
        <label for="">标题：</label>
        <input type="text" class="title">
    </div>
    <div class="group">
        <label for="">内容：</label>
        <textarea class="content"></textarea>
    </div>
    <button class="send">发布</button>
    <ul class="list">
        <!-- <li>
            <h3>标题11</h3>
            <p>内容111111111111111111111，的法国海军的法国红酒看来而退哦而归还借款</p>
            <span>X</span>
        </li>
        <li>
            <h3>标题22</h3>
            <p>内容22222222222222222222</p>
            <span>X</span>
        </li>
        <li>
            <h3>标题33</h3>
            <p>内容33333333333333333333</p>
            <span>X</span>
        </li> -->
    </ul>
</div>

<script src="./utils.js"></script>
<script>
// 获取元素
var title = $('.title');
var content = $('.content');
var send = $('.send');
var list = $('.list');

// 给 send 添加点击事件
send.onclick = function (){
    // 获取用户输入的标题和内容
    var titValue = title.value;
    var conValue = content.value;

    // 空值判断
    if (!titValue || !conValue) {
        alert('标题和内容不能为空！');
        return;
    }

    // 创建一个li节点
    var newLi = document.createElement('li');
    // 添加newLi的结构
    newLi.innerHTML = `<h3>${titValue}</h3>
                        <p>${conValue}</p>
                        <span>X</span>`;
    // 将newLi添加到list中
    list.appendChild(newLi);

    // 清空输入框
    title.value = '';
    content.value = '';

    // 给newLi中的span添加点击事件
    newLi.lastElementChild.onclick = function (){
        // 删除当前newLi节点
        newLi.remove();
    }
}

</script>
</body>
</html>